namespace rian {
  var c = document.getElementById("canvas-club") as HTMLCanvasElement;
  var ctx = c.getContext("2d") as CanvasRenderingContext2D; //获取canvas上下文
  var w = (c.width = window.innerWidth);
  var h = (c.height = window.innerHeight); //设置canvas宽、高
  var clearColor = "rgba(0, 0, 0, .1)"; //画板背景,注意最后的透明度0.1 这是产生叠加效果的基础

  function random(min: number, max: number) {
    return Math.random() * (max - min) + min;
  }

  class RainDrop {
    x: number; //涟漪x坐标
    y: number;
    color: string;
    vy: number; ///雨滴下落速度
    hit: number; //下落的最大值
    size: number;
    constructor(
      x: number,
      y: number,
      color: string,
      vy: number,
      hit: number,
      size: number
    ) {
      this.x = x;
      this.y = y;
      this.color = color;
      this.vy = vy;
      this.hit = hit;
      this.size = size;
    }
    init() {
      this.x = random(0, w); //雨滴的位置x
      this.y = 0; //雨滴的位置y
      this.color = "hsl(180, 100%, 50%)"; //雨滴颜色 长方形的填充色
      this.vy = random(4, 5); //雨滴下落速度
      this.hit = random(h * 0.8, h * 0.9); //下落的最大值
      this.size = 2; //长方形宽度
    }
    draw() {
      if (this.y < this.hit) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.size, this.size *30); //绘制长方形，通过多次叠加长方形，形成雨滴下落效果
      }
      this.update(); //更新位置
    }

    update() {
      if (this.y < this.hit) {
        this.y += this.vy; //未达到底部，增加雨滴y坐标
      } else {
        this.init();
      }
    }
  }

  const drops:any= []; //初始化一个雨滴

  for (let index = 0; index < 30; index++) {
    setTimeout(function () {
      var r = new RainDrop(
        random(0, w),
        0,
        "hsl(180, 100%, 50%)",
        random(4, 5),
        random(h * 0.8, h * 0.9),
        2
      );
      r.init();

      drops.push(r);
    }, index * 200);
  }
  function anim() {
    ctx.fillStyle = clearColor; //每一帧都填充背景色
    ctx.fillRect(0, 0, w, h); //填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
    for (var i in drops) {
      drops[i].draw();
    }

    requestAnimationFrame(anim); //控制动画帧
  }

  //启动动画
  anim();
}
